<template>
	<view class="my-page">
		<u-navbar leftIconColor="#000" :autoBack="true" :placeholder="true" bgColor="rgba(255,255,255,0.0)">
			<view slot="center" class="nav-title">
				工单
			</view>
			<!-- <view slot="right" class="nav-right">
				工单回复
			</view> -->
		</u-navbar>
		<view class="content">
			<view class="text">
				<u--textarea maxlength="-1" :autoHeight="true" class="custom-textarea" v-model="text"
					placeholder="请输入工单内容" border="none"></u--textarea>
			</view>
			<view class="upload">
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="3" width="100" height="100">
					<image src="../../../static/home/add=img.png" mode="widthFix" style="width: 100px;height: 100px;">
					</image>
				</u-upload>
			</view>
		</view>
		<view class="btn">
			<u-button shape="circle" size="large" color="linear-gradient(to left, #FD5674, #FF6448)" type="primary"
				text="确认" @click="upWork"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text: '',
				fileList1: []
			}
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result,
						})
					);
					fileListLen++;
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: "https://api.eachidc.com/api/upload/upload", // 仅为示例，非真实的接口地址
						filePath: url,
						name: "file",
						formData: {
							'tokenSJZX': uni.getStorageSync("token")
						},
						success: (res) => {
							let img = JSON.parse(res.data)
							setTimeout(() => {
								resolve(img.url);
							}, 1000);
						},
					});
				});
			},
			upWork() {
				if (this.text == '') {
					uni.showToast({
						title: '请输入工单内容！',
						icon: 'none'
					})
					return
				}
				if (this.fileList1.length < 1) {
					uni.showToast({
						title: '请输入工单内容！',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					mask: true
				})
				let params = {
					content: this.text,
					img: []
				}
				this.fileList1.map(item => {
					params.img.push(item.url)
				})
				this.$Request({
					method: 'POST',
					url: '/api/notice/workOrderPost',
					data: params,
					ismsg: true,
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						this.fileList1 = []
						this.text = ''
					}
				})
			}
		}
	}
</script>

<style>
	.custom-textarea {
		background-color: rgba(255, 255, 255, 0.0);
	}
</style>
<style lang="scss" scoped>
	.my-page {
		background-image: url('../../../static/home/home-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 580rpx;
		min-height: 80vh;
		padding: 30rpx;

		.nav-title {
			color: #000;
		}

		.nav-right {
			font-size: 26rpx;
		}

		.content {
			padding: 30rpx;
			border-radius: 30rpx;
			background-color: #fff;
			box-shadow: 0rpx 3rpx 32rpx 1rpx rgba(0, 0, 0, 0.08);

			.text {
				background-color: #F7F5F6;
				padding: 10rpx;
				border-radius: 30rpx;
				min-height: 45vh;
			}

			.img-box {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;

				image {
					width: 200rpx;
					height: 150rpx;
				}
			}

			.upload {
				margin-top: 30rpx;

				image {
					width: 240rpx;
					height: 240rpx;
				}
			}
		}

		.btn {
			position: fixed;
			width: 92%;
			bottom: 5%;
			left: 0;
			right: 0;
			margin: 0 auto;
		}
	}
</style>